<script lang="ts" setup>
import type { DictApi } from '#/api';

import { reactive } from 'vue';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { DictResp } from '#/api';

const sys_yes_no = reactive<DictApi.SelectOption[]>([]);
// const mes_mainten_type = reactive<DictApi.SelectOption[]>([]);

DictResp(['sys_yes_no', 'mes_client_type']).then((res) => {
  if (res.sys_yes_no) {
    sys_yes_no.push(...res.sys_yes_no);
  }
});

const [BaseForm] = useVbenForm({
  submitButtonOptions: { show: false }, // 隐藏提交按钮
  resetButtonOptions: { show: false }, // 隐藏重置按钮
  // wrapperClass: 'grid-cols-2',
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      rules: 'required',
      formItemClass: ' w-[300px] ml-[-20px]',
      componentProps: {
        placeholder: '',
      },
      fieldName: 'password',
      label: '分类名称',
    },
    {
      component: 'InputNumber',
      rules: 'required',
      fieldName: 'area',
      formItemClass: 'w-[300px] ml-[258px] mt-[-60px]',
      label: '显示排序',
      componentProps: {
        min: 0,
        defaultValue: 0,
        controls: true,
        class: 'w-full',
      },
    },
    {
      component: 'RadioGroup',
      rules: 'required',

      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '是否启用',
      },
      fieldName: 'radioGroup',
      label: '物料/产品',
    },

    {
      component: 'RadioGroup',
      formItemClass: 'w-[300px] ml-[258px] mt-[-50px]',
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '是否启用',
      },
      fieldName: 'radioGroup',
      label: '是否启用',
    },
  ],
  // wrapperClass: 'grid-cols-1',
});

function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}
</script>

<template>
  <BaseForm />
</template>
<!-- schema: [
{
  component: 'Input',
  rules: 'required',
  fieldName: 'workshopCode',
  formItemClass: 'w-full ml-[-20px]',
  label: '父分类',
  componentProps: { placeholder: '' },
},
{
  component: 'Input',
  rules: 'required',
  formItemClass: ' w-[300px] ml-[-20px]',
  componentProps: {
    placeholder: '',
  },
  fieldName: 'password',
  label: '分类名称',
},
{
  component: 'InputNumber',
  rules: 'required',
  fieldName: 'area',
  formItemClass: 'w-[300px] ml-[258px] mt-[-60px]',
  label: '显示排序',
  componentProps: {
    min: 0,
    defaultValue: 0,
    controls: true,
    class: 'w-full',
  },
},
{
  component: 'RadioGroup',
  rules: 'required',

  componentProps: {
    allowClear: true,
    options: sys_yes_no,
    placeholder: '是否启用',
  },
  fieldName: 'radioGroup',
  label: '物料/产品',
},

{
  component: 'RadioGroup',
  formItemClass: 'w-[300px] ml-[258px] mt-[-50px]',
  componentProps: {
    allowClear: true,
    options: sys_yes_no,
    placeholder: '是否启用',
  },
  fieldName: 'radioGroup',
  label: '是否启用',
},
], -->
